import React, {Component} from 'react';
import {Text, TextInput, TouchableOpacity, View, Alert, StyleSheet, AsyncStorage, FlatList, Image} from 'react-native';
import {BasicStyle} from "../../../style/BasicStyle";
import Spinner from 'react-native-loading-spinner-overlay';
import CountEmitter from './../../utils/event/CountEmitter';
import Toast from '@remobile/react-native-toast';
import FetchUtils from './../../utils/FetchUtils';
import utils from './../../utils/utils';

export default class AddressEdit extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: "管理收货地址",
        headerStyle: {
            backgroundColor: '#F6F6F6',
        },
        headerTitleStyle: {
            alignSelf: 'center',
            fontSize: utils.setSpText(17),
        },
        headerRight: <TouchableOpacity/>
    });

    constructor(props) {
        super(props);
        this.addressId = '';
        this.consignee = '';
        this.address = '';
        this.telephone = '';
        this.type = '';

        this.state = {
            loadingStatus: false,
            consignee: '',
            address: '',
            telephone: '',
        };
    }

    componentDidMount() {
        if (this.props.navigation.state.params.id) {
            this._getData(this.props.navigation.state.params.id);
            this.addressId = this.props.navigation.state.params.id;
        }
    }

    render() {
        return (
            <View style={[BasicStyle.containerView, styles.containerView]}>
                <Spinner visible={this.state.loadingStatus} textContent={""} textStyle={{color: '#FFF'}}/>
                <View style={BasicStyle.containerView}>

                    <View style={styles.addrListItemView}>

                        <View style={styles.addrListItemTitleView}>
                            <Text style={[BasicStyle.commonFontLittleText, {marginLeft: utils.autoWidth(16)}]}>
                                收货人：
                            </Text>
                            <TextInput style={BasicStyle.containerView} onChangeText={(text) => {
                                this.consignee = text;
                            }
                            }>{this.state.consignee}</TextInput>
                        </View>

                        <View style={styles.addrListItemTitleView}>
                            <Text style={[BasicStyle.commonFontLittleText, styles.addrListItemTitleText]}>收货地址：</Text>
                            <TextInput style={BasicStyle.containerView} onChangeText={(text) => {
                                this.address = text;
                            }
                            }>{this.state.address}</TextInput>
                        </View>

                        <View style={styles.addrListItemTitleView}>
                            <Text
                                style={[BasicStyle.commonFontLittleText, styles.addrListItemTitleText]}>联系手机：</Text>
                            <TextInput style={BasicStyle.containerView} onChangeText={(text) => {
                                this.telephone = text;
                            }
                            }>{this.state.telephone}</TextInput>
                        </View>

                    </View>

                </View>

                <TouchableOpacity style={styles.addButStyle} onPress={
                    this._saveBut.bind(this)
                }>
                    <Text style={[BasicStyle.commonFontText, styles.addButText]}>保存地址</Text>
                </TouchableOpacity>
            </View>
        )
    }

    _saveBut = () => {
        let params = {
            id: this.addressId,
            consignee: this.consignee,
            address: this.address,
            telephone: this.telephone,
            type: this.type,
        };
        if (this.consignee === '') {
            Alert.alert("警告", "请检查收货人")
        } else if (this.address === '') {
            Alert.alert("警告", "请检查收货地址")
        } else if (this.telephone === '' || this.telephone.length !== 11) {
            Alert.alert("警告", "请检查手机号")
        } else {
            AsyncStorage.getItem("XToken").then((xToken) => {
                console.log(params);
                FetchUtils.postWithParamHeader(utils.apiUrl + '/user/addaddress', params, xToken, (res) => {
                    if (res.code !== 200) {
                        Toast.showShortBottom("保存错误：" + res.apiData);
                        this.setState({
                            loadingStatus: false,
                        })
                    } else {
                        Toast.showShortBottom("保存成功");
                        CountEmitter.emit("addressListRefresh");
                        this.props.navigation.goBack();
                    }
                });
            });
        }
    }

    /*获取数据*/
    _getData = (id) => {
        let param = {
            addrId: id,
        };
        console.log(id);
        AsyncStorage.getItem("XToken").then((xToken) => {
            FetchUtils.getWithHeader(utils.apiUrl + '/user/address', xToken, param, (res) => {
                if (res.code === 200) {
                    this.setState({
                        address: res.apiData.address,
                        consignee: res.apiData.consignee,
                        telephone: res.apiData.telephone,
                    });
                    this.address = res.apiData.address;
                    this.consignee = res.apiData.consignee;
                    this.telephone = res.apiData.telephone;
                    this.type = res.apiData.type;
                } else {
                    Toast.showShortBottom("错误：" + res.apiData);
                }
            });
        });
    }

}

const styles = StyleSheet.create({
    containerView: {
        justifyContent: 'space-between'
    },
    addrListItemView: {
        marginTop: utils.autoheight(50),
        backgroundColor: '#FFF',
        marginBottom: utils.autoheight(20),
    },
    addrListItemTitleView: {
        flexDirection: 'row',
        height: utils.autoheight(44),
        borderBottomWidth: utils.autoheight(0.5),
        borderColor: '#E5E5E5',
        justifyContent: 'center',
        alignItems: 'center',
    },
    addrListItemTitleText: {
        marginLeft: utils.autoWidth(16),
    },
    addrListItemOperationView: {
        height: utils.autoheight(44),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    addrListItemDefaultBut: {
        flexDirection: 'row',
        marginLeft: utils.autoWidth(16)
    },
    addrListItemDefaultText: {
        marginLeft: utils.autoWidth(10)
    },
    addrListItemOperationText: {
        marginRight: utils.autoWidth(16),
        marginLeft: utils.autoWidth(5)
    },
    addButText: {
        color: '#FFF'
    },
    addButStyle: {
        height: utils.autoheight(44),
        width: utils.screenWidth,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
    },
    addrImg: {
        height: utils.autoWidth(20),
        width: utils.autoWidth(20),
    },
    operationImg: {
        height: utils.autoheight(25),
        width: utils.autoWidth(18),
    }
});